<template>
  <view>
    <view class="main-container">
      <view class="top-tab-bar">
        <view
          @click="tabClick(item, index)"
          :key="index"
          :class="current === item.value ? 'tab-item-selected' : ''"
          class="tab-item"
          v-for="(item, index) in tabs"
        >
          {{ item.name }}
        </view>
      </view>
    </view>
    <view class="order-list">
      <view class="order-card" v-for="(item, index) in list" :key="index">
        <view class="title-and-status">
          <view class="title-left">
            <view class="title-main">
              {{ item.serverCode }}
            </view>
            <view class="subhead">
              {{ item.serverValue }}
            </view>
          </view>
          <view class="status">{{ item.status }}</view>
        </view>
        <view class="item-tag">
          <view v-for="(service, idx) in item.serverValueList" :key="idx">
            <view class="service-tag">
              {{ service }}
            </view>
          </view>
        </view>
        <view class="cycle-and-price">
          <view class="cycle"
            >服务周期：{{ item.serverStart }} -- {{ item.serverEnd }}</view
          >
          <view class="price">￥{{ item.orderAmout }}</view>
        </view>
        <view class="div-line"></view>
        <view class="service-btn">
          <view
            class="my-btn"
            @click="editHandle(item)"
            v-if="item.orderState == 0 && roles == 1000"
            >修改</view
          >
          <!-- <view class="my-btn" v-if="item.orderState==0&&roles==1000">
						取消
					</view> -->
          <view
            class="my-btn btn-green"
            @click="toPay(item)"
            v-if="item.orderState == 0 && roles == 1000"
            >支付</view
          >
          <view
            class="my-btn btn-green"
            v-if="item.orderState != 0 && roles == 1000"
            >已支付</view
          >
        </view>
      </view>
    </view>
    <uni-load-more :status="status"></uni-load-more>
  </view>
</template>

<script>
import PageInfo from "../../utils/pageutils.js";
import { orderList, orderDetail, saveOrder } from "../../common/api/index.js";
export default {
  props: {
    isInIndex: false,
  },
  components: {},
  data() {
    return {
      tabs: [
        {
          name: "全部",
          value: "8",
          img: "https://bedfamily.eos.xian-2.cmecloud.cn/profile/xiaochengxu/static/icon_dzf.png",
        },
        {
          name: "待支付",
          value: "0",
          img: "https://bedfamily.eos.xian-2.cmecloud.cn/profile/xiaochengxu/static/icon_dzf.png",
        },
        {
          img: "https://bedfamily.eos.xian-2.cmecloud.cn/profile/xiaochengxu/static/icon_fwz.png",
          name: "服务中",
          value: "4",
        },
        {
          name: "已完成",
          value: "7.1",
          img: "https://bedfamily.eos.xian-2.cmecloud.cn/profile/xiaochengxu/static/static/icon_ywc.png",
        },
        {
          name: "已取消",
          value: "5",
          img: "https://bedfamily.eos.xian-2.cmecloud.cn/profile/xiaochengxu/static/static/icon_yqx.png",
        },
      ],
      current: 5,
      orderStatus: 5, //支付状态
      status: "", //状态
      readForm: {},
      list: [],
      pageInfo: new PageInfo(),
      roles: "",
    };
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    this.loadMore();
  },
  onLoad(opt) {
    this.roles = uni.getStorageSync("ROLES");
    if (opt.orderType) {
      this.orderType = opt.orderType;
      this.current = this.orderType;
      this.refresh();
    }
  },
  methods: {
    tabClick(item, index) {
      console.log("item", item);
      this.current = item.value;
      this.refresh();
    },
    // 列表
    getList() {
      let userId = uni.getStorageSync("USER_ID");
      this.roles = uni.getStorageSync("ROLES");
      // if (this.roles == 1000) {
      //   this.tabs = [
      //     {
      //       name: "全部",
      //       value: "5",
      //     },
      //     {
      //       name: "待支付",
      //       value: "0",
      //     },
      //     {
      //       name: "待派单",
      //       value: "1",
      //     },
      //     {
      //       name: "待接单",
      //       value: "2",
      //     },
      //     {
      //       name: "服务中",
      //       value: "3",
      //     },
      //   ];
      // }
      // if (this.roles == 1) {
      //   this.tabs = [
      //     {
      //       name: "全部",
      //       value: "5",
      //     },
      //     {
      //       name: "待派单",
      //       value: "1",
      //     },
      //     {
      //       name: "待接单",
      //       value: "2",
      //     },
      //     {
      //       name: "服务中",
      //       value: "3",
      //     },
      //   ];
      // }
      // if (this.roles == 2) {
      //   this.tabs = [
      //     {
      //       name: "全部",
      //       value: "5",
      //     },
      //     {
      //       name: "待接单",
      //       value: "2",
      //     },
      //     {
      //       name: "服务中",
      //       value: "3",
      //     },
      //     {
      //       name: "已取消",
      //       value: "4",
      //     },
      //   ];
      // }
      let params = {
        pageIndex: this.pageInfo.pageIndex,
        pageSize: this.pageInfo.pageSize,
        nurseUserId: userId,
        orderState: this.current,
        roles: this.roles,
      };
      console.log("params", params);
      orderList(params)
        .then((result) => {
          console.log("result", result);
          const list = result.data.rows || [];
          const total = result.data.total;
          this.list = [...this.list, ...list];
          this.pageInfo.total = total;
          this.pageInfo.loadedTotal = this.list.length;
          setTimeout(() => {
            if (this.pageInfo.isNotLoadAll) {
              this.status = "more";
            } else {
              this.status = "noMore";
            }
            uni.stopPullDownRefresh();
          }, 200);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    editHandle(item) {
      console.log("item", item);
      orderDetail({
        orderId: item.orderId,
      }).then((res) => {
        let info = res.data.data;
        this.$store.commit("page/setPageInfo", {
          chooseOrder: true,
          chooseOrderInfo: info,
        });
        uni.navigateTo({
          url: `/nursingWorkerPages/pages/itemDetail/itemDetail?code=${info.orderCategory}&serverId=${info.orderServer}&isUpdate=true`,
        });
      });
    },
    // 刷新
    refresh() {
      this.pageInfo.reset();
      this.list = [];
      this.status = "loading";
      this.getList();
    },
    // 加载更多
    loadMore() {
      if (this.pageInfo.isNotLoadAll) {
        this.status = "loading";
        this.pageInfo.nextPage();
        this.getList();
      } else {
        this.status = "noMore";
      }
    },
    // 支付
    toPay(item) {
      let params = {
        orderCategory: item.orderCategory,
        orderServer: item.orderServer,
        orderAmout: item.orderAmout,
        nursePatientId: item.nursePatientId,
        nurseUserId: item.nurseUserId,
        serverStart: item.serverStart,
        serverEnd: item.serverEnd,
        orderId: item.orderId,
        isFlag: 1,
        openId: uni.getStorageSync("openid_key"),
      };
      saveOrder(params)
        .then((res) => {
          if (res.data.code == 200) {
            this.pay(res.data.data);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    pay(result) {
      console.log("result", result);
      const data = result;
      const orderInfo = {
        appid: data.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
        nonceStr: data.nonceStr, // 随机字符串
        package: data.package, // 固定值
        timeStamp: data.timeStamp, // 时间戳（单位：秒）
        paySign: data.paySign, // 签名，这里用的 MD5/RSA 签名
        signType: data.signType,
      };
      console.log("orderInfo", orderInfo);
      uni.requestPayment({
        provider: "wxpay",
        ...orderInfo,
        success(res) {
          console.log("支付成功", res);
          uni.showToast({
            icon: "success",
            title: "支付成功",
            complete() {
              setTimeout(() => {
                uni.navigateBack();
              }, 2000);
            },
          });
        },
        fail(err) {
          console.log("支付失败", err);
          uni.showToast({
            icon: "none",
            title: "支付失败",
          });
        },
      });
    },
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
page {
  background: #f9f9f9;
}

.main-container {
  display: flex;
  flex-direction: column;
}

.top-tab-bar {
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fit, 150rpx);
  grid-template-rows: repeat(auto-fit, 66rpx);
  grid-column-gap: 20rpx;
  grid-row-gap: 26rpx;
  background: #f9f9f9;

  // position: sticky;
  // top: 0;
  // z-index: 2;
  .tab-item {
    width: 150rpx;
    height: 66rpx;
    background: #f1f1f1;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(35, 35, 35, 0.8);
    font-size: 26rpx;
  }

  .tab-item-selected {
    background: #dff0ef;
    color: #0bc5ae;
  }
}

.order-card {
  margin-right: 30rpx;
  margin-left: 30rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;

  .title-and-status {
    display: flex;
    width: 100%;
    justify-content: space-between;

    .title-left {
      display: flex;
      justify-content: flex-start;
      width: 80%;
      align-items: flex-end;

      .title-main {
        color: #333333;
        font-size: 35rpx;
        font-weight: 700;
        margin-right: 10rpx;
      }

      .subhead {
        color: #747474;
        font-size: 28rpx;
      }
    }

    .time {
      flex: 1;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .status {
      font-size: 30rpx;
      color: #747474;
    }
  }

  .item-tag {
    display: flex;
    justify-content: flex-start;
    // width: 80%;
    align-items: center;
    margin-top: 20rpx;
    flex-wrap: wrap;

    .service-tag {
      min-width: 110rpx;
      background-color: #eafaf5;
      font-size: 20rpx;
      color: #6f7070;
      padding: 10rpx;
      height: 50rpx;
      line-height: 30rpx;
      text-align: center;
      border-radius: 25rpx;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }
  }

  .cycle-and-price {
    display: flex;
    justify-content: space-between;
    font-size: 25rpx;
    color: #6c6c6c;
    margin-top: 10rpx;

    .cycle {
      width: 80%;
    }

    .price {
    }
  }

  .project-row {
    display: flex;
    align-items: center;
    margin-top: 36rpx;

    .img {
      width: 136rpx;
      height: 136rpx;
      border-radius: 20rpx;
    }

    .name {
      color: #232323;
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 24rpx;
    }
  }

  .info-row {
    display: flex;
    margin-top: 40rpx;

    .name {
      width: 136rpx;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .value {
      color: #232323;
      font-size: 26rpx;
    }
  }

  .div-line {
    width: 100%;
    height: 2rpx;
    background: #f8f8f8;
    margin-top: 40rpx;
  }

  .price-and-pay {
    display: flex;
    align-items: center;
    margin-top: 20rpx;

    .left {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .cancel-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx rgba(35, 35, 35, 0.26);
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(35, 35, 35, 0.8);
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }

    .ok-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx #0bc5ae;
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0bc5ae;
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }
  }
}

.del-btn {
  width: 60rpx;
  height: 40rpx;
  border: solid 2rpx #c5070a;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c5070a;
  font-size: 14rpx;
  margin-left: 8rpx;
  margin-right: 8rpx;
}

.service-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
  flex-wrap: wrap;
}

.service-btn .my-btn:not(:last-child) {
  margin-right: 10rpx;
}

.my-btn {
  min-width: 140rpx;
  height: 58rpx;
  line-height: 58rpx;
  border: 1rpx solid #d0d0d0;
  border-radius: 40rpx;
  color: #787878;
  text-align: center;
}

.btn-green {
  border-color: #04bdb3;
  color: #04bdb3;
}
</style>
